﻿
@model IEnumerable<Developer.Entity.CycleModel>

@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
    var i = 1;
}
<style type="text/css">
    #module_list {
        margin-left: 4px;
    }

    .modules {
        float: left;
        width: 200px;
        height: 70px;
        margin: 10px;
        border: 1px solid #acc6e9;
        background: #e8f5fe;
    }

    .m_title {
        margin-top: 0px;
        height: 45px;
        line-height: 47px;
        background: #afc6e9;
    }

    #loader {
        height: 24px;
        text-align: center;
    }
</style>

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 回收型号顺序 <span class="c-gray en">&gt;</span> 手机型号列表 <a class="btn btn-success radius r" id="btn-refresh" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">

    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <label>选择品牌：</label>
        <select name="" id="brand" style="height: 29px;" onchange="window.location=this.value;">
            @{
                int bid = (int)ViewBag.bid;
                var brands = Developer.Service.CycleBrandService.GetAll().Where(a => a.IsAbort == false);
                <option value="/admin/main/editCycleModelSequence?bid=@bid">@brands.FirstOrDefault(a=>a.Id==bid).Name</option>
                foreach (var brand in brands)
                {
                    <option value="/admin/main/editCycleModelSequence?bid=@brand.Id">@brand.Name</option>
                }

            }
        </select>
        <span style="color:red">拖拽方框以调准顺序</span>
    </div>
    <div class="mt-20">
        <form id="form1">
            <div id="loader"></div>
            <div id="module_list">
                <input type="hidden" id="orderlist" />
                @foreach (var model in Model.OrderBy(a => a.Sequence))
                {
                    <div class="modules" title='@(model.Id)'>
                        <h4 class="m_title">@(model.CycleBrand.Name + " " + model.Name)</h4>
                        <input type="hidden" value="@(model.Sequence)" />
                        <p style="line-height:5px">@(i++)</p>
                    </div>
                }
            </div>
        </form>
        <div style="clear:both;"></div>
    </div>
</div>
<script src="~/Assets/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Assets/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".m_title").bind('mouseover', function () {
            $(this).css("cursor", "move")
        });

        var show = $("#loader");
        var orderlist = $("#orderlist");
        var list = $("#module_list");
        var old_order = [];

        //获取原先的顺序列表
        list.children(".modules").each(function () {
            var val = $(this).find("input").val();
            old_order.push(val);
        });

        list.sortable({
            opacity: 0.6, //设置拖动时候的透明度
            revert: true, //缓冲效果
            cursor: 'move', //拖动的时候鼠标样式
            handle: '.m_title',  //可以拖动的部位，模块的标题部分
            update: function () {
                var new_id = [];

                list.children(".modules").each(function () {
                    new_id.push(this.title);
                });
                var newid = new_id.join(',');
                var oldid = old_order.join(',');
                $.ajax({
                    type: "post",
                    url: "/admin/main/SaveSequence", //服务端处理程序
                    data: { id: newid, order: oldid,type:4 },   //id:新的排列对应的ID,order：原排列顺序
                    beforeSend: function () {
                      //  show.html("<img src='load.gif' /> 正在更新...");
                        show.html(" 正在更新...");
                    },
                    success: function (msg) {
                        show.html("排序成功...");
                        //重新刷新页面
                        window.location.reload();
                    }
                });
            }
        });
    });

    //$('#brand').change(function () {
    //    var bid = $(this).children('option:selected').val();
    //    //console.log(bid);

    //    window.location.href = '/admin/main/EditRepairModelSequence?bid=' + bid;
    //});
</script>

